/*	NOTES:
 *  to fill up the horizontal space, divs need to be in block formatting
 *  context (BFC). overflow: hidden does this.
 *	any display styles stop the div value from being block (taking up)
 *  the rest of the horizontal space. (e.x. display: inline-block)
 *
 *	Color Scheme:
 *  black/letters: 	#1a1a1a		
 *  light gray:		#7f7f7f
 *  orange:			#f53c17
 *	red:			#b92e26		(fail)
 *  green:			#6b9f40		(success)
 */


html {
	overflow-y: auto; /*should be able to scroll left/right to see hidden content*/

	text-align: center; /*centers body div*/
	
	
	
	background: url(Orange_Momiji_3_background.jpg) no-repeat right top fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body {
	font-family: "Open Sans", sans-serif;
	font-size: 12;
	font-weight: bold;
	color: black;	/*black/letters*/

	margin: 0;
}

#sidebar {
	float: left;
	position: fixed;
	
	height: 100%;
	width: 300px;
}

		#menu {
			float: left;
			
			height: 100%;
			width: 255px;	/* = sidebar width - border width - padding left - padding right. needs to be right or border disappears*/
			
			padding: 40px 20px 0 20px;
			
			/*setting white, opaque background*/
			background-color: white;
			opacity: 0.75;
			filter: alpha(opacity=75); /*For IE8 and earlier */
		}
		
				#logo {					
					text-align: center;		/*center the logo in the div*/
					font-family: "Cutive", serif;
					
					height: 40px;
				}
				
						#logo ul {
							font-size: 35;
							color: #f53c17; /*orange*/
							
							/*immitate text outline by making a shadow of 1px around the text*/
							text-shadow:
						    1px 1px 0 #000,
						    /* Simulated effect for Firefox and Opera
						       and nice enhancement for WebKit */
 						   -1px -1px 0 #000,
 						    1px -1px 0 #000,
 						   -1px  1px 0 #000,
 						    1px  1px 0 #000; 
							
							padding: 0;
							margin: 0;
						}
								
								#logo ul li {
									display: inline-block;
									
									margin: -5px;
									/*padding: -5px;*/
								}

								#l2 {
									color: #6b9f40 /*green*/
								}
						
						#logo p {
							font-size: 10;
							
							margin: 0;
						}
				
				#menu-buttons {
					display: block;	
				
					padding: 40px 0 5px 0;
					
					text-align: left;
				}
				
				
						#menu-buttons ul {}
						
						
								#menu-buttons ul a {
									text-decoration: none;
								}
								
											#menu-buttons ul li{
												color: black;
												list-style: none;
												border-bottom: 1px solid black; /*dark gray*/
												
												/*note: padding-bottom pushes underline down*/
												padding: 20px 0 3px 10px;
												margin-right: 70px;	/*shorten underline*/
									
												-webkit-transition: all .3s ease-out;
											}
											
											
											#menu-buttons ul li:hover {
												color: #f53c17;	 /*orange*/
												border-bottom: 1px solid #f53c17; /*orange*/
									
												margin-right: 50px;
												margin-left: 20px;
											}

				
				#menu-content {
					display: block;
					
					padding: 0 10px 0 10px;		/*no top padding because the <p> tag within it is padded*/
					
					line-height: 200%;	/*double spaced*/
				}
		
		#border {
			float: left;
			
			background-color: white;
			
			height: 100%;
			width: 5px;
		}

#content {
	display: block;
	
	padding: 20px;
	margin-left: 300px;		/* = sidebar width. keeps content from hiding under fixed sidebar*/
	width: auto;
	min-width: 300px;		/*set this as something else later based on content*/
	
	font-family: "Open Sans", sans-serif;
	font-size: 15;
}

		#content table {
			width: 100%;
			
			text-align: left;
		}
		
		.centered {
			text-align: center;		/*center #settings in its containing div, #content*/
		}
				
				#title-wrapper {
					display: inline-block;
					
					border-style: solid;
					border-color: white;
					border-width: 3px;
					
					width: 300px;
					
					font-family: "Cutive", serif;
					text-align: center
				}
		
		
						#title {
							//display: inline-block;		/*allows #settings to be centered by text-align: center*/
							
							width: 300px;
							padding: 20px 0 20px 0;
							
							font-size: 20;
							
							/*setting white, opaque background*/
							background-color: white;
							opacity: 0.75;
							filter: alpha(opacity=75); /*For IE8 and earlier */
						}